<template>
    <div class="loginbox">
        <div class="childBox">
            <h1>欢迎光临</h1>
            <van-form @submit="onSubmit">
                <van-cell-group inset>
                    <van-field
                        v-model="form.account"
                        name="用户名"
                        label="用户名"
                        placeholder="用户名"
                        :rules="[{ required: true, message: '请填写用户名' }]"
                    />
                    <van-field
                        v-model="form.password"
                        type="password"
                        name="密码"
                        label="密码"
                        placeholder="请输入密码"
                        :rules="[{ required: true, message: '请填写密码' }]"
                        autocomplete="off"
                    />
                </van-cell-group>
                <div style="margin: 16px">
                    <van-button round block type="primary" native-type="submit">
                        提交
                    </van-button>
                </div>
                <div class="bottom" @click="goRegister">
                    还未注册？现在去/GO!!!
                </div>
            </van-form>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { login } from "@/api/users";
import crypt from "@/utils/bcrypt";
const router = useRouter();
const form = ref({
    account: "",
    password: "",
});
//登录
const onSubmit = async () => {
    console.log(form.value);
    let data = {
        account: form.value.account,
        password: crypt.encrypt(form.value.password),
    };
    crypt.decrypt(data.password);
    let res = await login(data);
    console.log(res.code);
};
//注册
const goRegister = () => {
    router.replace("/register");
};
</script>

<style lang="less" scoped>
.loginbox {
    width: 100vw;
    height: 100vh;
    position: relative;
    .childBox {
        width: 400px;
        height: 300px;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        margin: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        h1 {
            margin-bottom: 20px;
        }
        .bottom {
            text-align: center;
            color: rgb(77, 70, 180);
        }
    }
}
</style>
